<template>
    <div class="feaceBox" v-show="isShowType">
        <div class="boxSize" @click="hizeBox()"></div>
        <div class="feace_ul">
            <div class="feace_title">更多分类</div>
            <div class="face_li box_flex" v-for="(item,index) in tabList" :key="index"> <!-- 点选方法 -->
                <div class="face_li_con" :class="selectActive == index ? 'select_active':''">全部商品</div>
                <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/right_icon_active.png" v-if="selectActive == index" class="face_li_img" alt="">
                <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/right_icon.png" v-else class="face_li_img" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            /** 显示类型 */
            isShowType: false,
            selectActive:0,
            tabList:[
                {
                    id:1,
                    name:'全部商品'
                },
                {
                    id:2,
                    name:'结婚首饰'
                },
                {
                    id:3,
                    name:'家用电器'
                },
                {
                    id:4,
                    name:'美妆护肤'
                },
                {
                    id:5,
                    name:'时尚服饰'
                },
                {
                    id:6,
                    name:'礼服租售'
                },
                {
                    id:7,
                    name:'家俱家私'
                },
                {
                    id:8,
                    name:'婚宴喜酒'
                },
                {
                    id:9,
                    name:'床上用品'
                },
                {
                    id:10,
                    name:'婚纱摄影'
                }
            ]
            
        };
    },
    computed: {
        
    },
    methods: {
        changeState(){
            this.isShowType = true;
            this.isShowType = !this.isShowType;
        },
        hizeBox(){
            this.isShowType = false;
            this.$emit('hizeBox',false)
        },
        
        /**
         * 确认
         */
        onClickSelectConfirm() {
            if (!this.isRangeValid) {
                wx.showToast({
                    title: '请输入正确的价格区间',
                    icon: 'none',
                });
                return;
            }
            this.$emit('range', {
                min: Number(this.tempMin) > 0 ? this.tempMin * 100 : '',
                max: Number(this.tempMax) ? this.tempMax * 100 : '',
            });
            this.filterType = '';
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.box_flex{
    display: flex;
}

.feaceBox{
    position: fixed;
    top: 0;
    left:0;
    width:100%;
    height:100vh;
    background-color: rgba(0, 0, 0, 0.40);
    z-index: 9;
}
.boxSize{
    width:100%;
    height: 100%;
}
.feace_ul{
    position: absolute;
    top:0;
    left:0;
    width:230rpx;
    height: 100%;
    background-color: #ffffff;
    padding: 50rpx 40rpx;
}
.feace_title{
    width:90%;
    font-size: 20px;
    border-bottom: 1px solid #feaaaf;
    margin-bottom: 30px;
}
.select_active{
    color: #feaaaf;
    border-bottom: 1px solid #feaaaf;
}
.face_li_con{
    border-bottom: 1px solid #feaaaf;
}
.face_li_img{
    width:12px;
    margin: 10rpx 0rpx 0rpx 20rpx;
}




.box_flex{
    display: flex;
}
</style>
